<template>
  <div>
    <el-main>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="工单编号:">
          <el-input
            v-model="pageParams.taskCode"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="工单状态:">
          <el-select v-model="pageParams.status" placeholder="请选择">
            <el-option
              v-for="item in WorOrder"
              :key="item.statusId"
              :label="item.statusName"
              :value="item.statusId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <div class="button">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          style="background-color: #ff772f; border: none"
          >新建</el-button
        >
        <el-button
          type="primary"
          style="background-color: #fbf4f0; color: #333; border: none"
          >工单配置</el-button
        >
      </div>
      <div class="buslist">
        <el-table highlight-current-row :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="taskCode" label="工单编号"> </el-table-column>
          <el-table-column prop="innerCode" label="设备编号"> </el-table-column>
          <el-table-column prop="taskType.typeName" label="工单类型">
          </el-table-column>
          <el-table-column prop="" label="工单方式" v-slot="{ row }">
            <template>{{ row.createType === 0 ? "自动" : "手动" }}</template>
          </el-table-column>
          <el-table-column
            prop="taskStatusTypeEntity.statusName"
            label="工单状态"
          >
          </el-table-column>
          <el-table-column prop="userName" label="运营人员"> </el-table-column>
          <el-table-column prop="createTime" label="创建日期">
          </el-table-column>
          <el-table-column prop="name" label="操作">
            <template v-slot="{ row }">
              <el-button @click="datails(row)" type="text" size="medium"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="footbtn">
          <div class="leftbox">
            <p>共{{ totalCount }}条数据 第{{ pageIndex }}/{{ totalPage }}</p>
          </div>
          <!-- 分页按钮 -->
          <div class="rightbox">
            <el-button-group style="margin-top: 15px">
              <el-button
                @click="previousPage"
                style="background-color: #d5ddf8"
                size="mini"
                >上一页</el-button
              >
              <el-button
                @click="nextPage"
                style="background-color: #d5ddf8"
                size="mini"
                >下一页</el-button
              >
            </el-button-group>
          </div>
        </div>
        <!-- 详情 -->
      </div>
    </el-main>
    <el-dialog title="工单详情" :visible.sync="dialogFormVisible" custom-class="el-dialog" width="630px">
       <div class="datails">
            <div class="dataliszz">
              <img src="@/assets/tan.png" alt="" />
            </div>
            <div style="flex: 1">
              <span style="margin-left: 20px; top: 10px">取消</span>
            </div>
            <div style="margin-right: 76px">
              <img
                src="https://likede2-admin.itheima.net/img/pic_3.e8208e34.png"
                alt=""
              />
            </div>
          </div>
          <el-form :model="form">
            <el-row>
              <el-col :span="12">
                <el-form-item label="设备编号：">
                <div>{{datailss.innerCode}}</div>
              </el-form-item>
              </el-col>
               <el-col :span="12">
                <el-form-item label="创建日期：">
                <div>{{datailss.createTime}}</div>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="取消日期：">
                <div>{{datailss.expect}}</div>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="运营人员：">
                <div>{{datailss.userName}}</div>
              </el-form-item>
              </el-col>
               <el-col :span="12">
                <el-form-item label="工单类型：">
                <div>{{taskType.typeName}}</div>
              </el-form-item>
              </el-col>
               <el-col :span="12">
                <el-form-item label="发货数量：">
                <div><span>补货详情</span></div>
              </el-form-item>
              </el-col>
               <el-col :span="12">
                <el-form-item label="工单方式：">
                <div>{{ datailss.createType === 0 ? "自动" : "手动" }}</div>
              </el-form-item>
              </el-col>
               <el-col :span="12">
                <el-form-item label="取消原因：">
                <div></div>
              </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div style="margin-top: 30px;">
            <el-row type="flex" justify="center">
            <el-button type="warning" plain >重新创建</el-button>
           </el-row>
          </div>
        </el-dialog>
  </div>
</template>

<script>
import { WorOrderStatus, TaskSearch, yydatalis } from '@/api/user'

export default {
  data () {
    return {
      taskType: {}, // 工单类型
      datailss: {}, // 工单详情
      dialogFormVisible: false,
      form: {},
      WorOrder: [], // 工单状态
      isshow: true,
      pageIndex: '', // 第几页
      totalCount: '', // 共多少数据
      totalPage: '', // 一共多少页
      formInline: {
        user: '',
        region: ''
      },
      tableData: [],
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
        taskCode: '',
        status: '',

        // 是否是运维工单 运营为true 运维为false
        isRepair: false
      }
    }
  },
  created () {
    this.TaskSearch()
    this.WorOrderStatus()
  },
  methods: {
    // 查看详情
    async datails (row) {
      this.dialogFormVisible = true
      const res = await yydatalis(row.userId)
      // console.log(res)
      this.datailss = res.data
      this.taskType = res.data.taskType
      console.log(this.datailss)
    },
    async WorOrderStatus () {
      const res = await WorOrderStatus()
      this.WorOrder = res.data
    },
    // 查询
    onSubmit () {
      // console.log(this.formInline.user, this.formInline.region)
      this.TaskSearch()
    },
    async TaskSearch () {
      const res = await TaskSearch({ ...this.pageParams })
      // console.log(res)
      // console.log(res.data.currentPageRecords)
      this.tableData = res.data.currentPageRecords
      this.tableData.forEach((item) => {
        this.$set(item, 'isEdit', false)
      })
      this.pageIndex = res.data.pageIndex
      this.totalCount = res.data.totalCount
      this.totalPage = res.data.totalPage
    },
    // 下一页
    nextPage () {
      this.pageParams.pageIndex++
      this.TaskSearch()
    },
    // 上一页
    previousPage () {
      if (this.pageParams.pageIndex === 1) {
        return this.$message.warning('已经是第一页了')
      }
      this.pageParams.pageIndex--
      this.TaskSearch()
    }
  }
}
</script>

<style lang="less" scoped>
.el-col-12 {
  line-height:0;
  height: 36px;
}
.el-dialog {
    border-radius: 10px;
}
.demo-form-inline {
  text-align: left;
  background-color: #fff;
  height: 40px;
  padding: 15px;
  font-weight: 800;
}
.button {
  background-color: #fff;
  margin-top: 20px;
  padding-left: 20px;
  line-height: 80px;
  text-align: left;
}
.buslist {
  .el-table thead {
    line-height: 80px;
  }
}
.footbtn {
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.el-form-item {
  line-height: 20px;
}
.el-main {
  line-height: normal;
  padding: 0;
}
.datails {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  background-color: hsla(0, 0%, 92.5%, 0.39);
  .dataliszz {
    margin-left: 22px;
  }
}
</style>
